<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
  <th:block th:include="include-nblog :: seo" />
  <th:block th:include="include-nblog :: header-res" />
    <style type="text/css">
        /*html, body {width:100%;height:100%;margin:auto;overflow: hidden;}*/
        /*body {display:flex;}*/
        #mse {flex:auto;}
        .xgplayer-prev{
            width: 40px;
            position: relative;
            -webkit-order: 0;
            -moz-box-ordinal-group: 1;
            order: 5;
            display: block;
            cursor: pointer;
            margin-left: 3px;
        }
        .xgplayer-next{
            width: 40px;
            position: relative;
            -webkit-order: 0;
            -moz-box-ordinal-group: 1;
            order: 6;
            display: block;
            cursor: pointer;
            margin-left: 3px;
        }
        .xgplayer-cycle{
            width: 40px;
            position: relative;
            -webkit-order: 0;
            -moz-box-ordinal-group: 1;
            order: 7;
            display: block;
            cursor: pointer;
            margin-left: 3px;
        }






    </style>
    <!--默认风格-->
<!--    <link th:href="@{/blog/css/jquery.my-modal.1.1.css}" type="text/css" rel="stylesheet">-->
    <!--win风格-->
<!--    <link th:href="@{/blog/css/jquery.my-modal.1.1.winStyle.css}" type="text/css" rel="stylesheet">-->
</head>
<body>
<!--top begin-->
<th:block th:include="include-nblog :: header-nav" />
<!--top end-->
<content>
  <!--lbox begin-->
  <div class="lbox">
    <div class="content_box whitebg">
      <input type="hidden" id="liked" th:value="${liked}">
      <input type="hidden" id="contentId" th:value="${content.id}">
        <input type="hidden" id="videoUrl" th:value="${content.videoUrl}">
        <input type="hidden" id="imgUrl" th:value="${content.imgUrl}">
      <h2 class="htitle">
        <span class="con_nav">您现在的位置是：<a th:href="${parentCategory.url}" th:text="${parentCategory.name}"></a>
          ><a th:href="${category.url}" th:text="${category.name}"></a>
        </span>
        文章内容
      </h2>

      <h1 class="con_tilte" th:text="${content.title}"></h1>
      <p class="bloginfo">
        <span th:text="${content.author}"></span>
        <span th:text="${#dates.format(content.gmtCreate, 'yyyy-MM-dd')}"></span>
        <span><span th:text="${content.readNum}"></span>人已围观</span>
      </p>

      <div class="con_text">
<!--        <p th:utext="${content.content}">-->
        <div id="mse"></div>
        <script src="//unpkg.byted-static.com/xgplayer/2.31.2/browser/index.js" charset="utf-8"></script>
        <script type="text/javascript">
            //自定义options
            let playerOptions = {
                cycle:false,
                cycleNum:-1,
                startTime:null,
                subtitleIndex:0,  //播放字幕数组下标
                endTime:null,
                filter:false,
                filterEndTime:null,
                subtitleAutoFocus:true,
                showCnText:true,
                showEnText:true,
                queryCollect:null,
                queryPracticeLevel:null,
            };
            let player;
            $(document).ready(function () {

                initData(function(){
                    setInterval(playerTimeProcess,1000);
                });

                player=new Player({
                    id: 'mse',
                    autoplay: true,
                    volume: 0.6,
                    playbackRate: [0.5, 0.75, 1, 1.25, 1.5, 2], //传入倍速可选数组
                    url:$("#videoUrl").val(),
                    poster: $("#imgUrl").val(),
                    playsinline: true,
                    // thumbnail: {
                    //     pic_num: 44,
                    //     width: 160,
                    //     height: 90,
                    //     col: 10,
                    //     row: 10,
                    //     urls: ['//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-thumbnail.jpg'],
                    // },
                    // danmu: {
                    //     comments: [
                    //         {
                    //             duration: 15000,
                    //             id: '1',
                    //             start: 3000,
                    //             txt: '长弹幕长弹幕长弹幕长弹幕长弹幕',
                    //             style: {  //弹幕自定义样式
                    //                 color: '#ff9500',
                    //                 fontSize: '20px',
                    //                 border: 'solid 1px #ff9500',
                    //                 borderRadius: '50px',
                    //                 padding: '5px 11px',
                    //                 backgroundColor: 'rgba(255, 255, 255, 0.1)'
                    //             }
                    //         }
                    //     ],
                    //     area: {
                    //         start: 0,
                    //         end: 1
                    //     }
                    // },
                    // height: window.innerHeight,
                    width: '100%',
                    //字幕
                    // textTrack: [
                    //     {
                    //         src: "https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/textTrack-1.vtt",
                    //         kind: "subtitles",
                    //         label: "字幕1",
                    //         srclang: "zh",
                    //         default: true
                    //     },
                    //     {
                    //         src: "https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/textTrack-2.vtt",
                    //         kind: "subtitles",
                    //         label: "字幕2",
                    //         srclang: "en",
                    //         default: false
                    //     }
                    // ],
                    textTrackStyle: {
                        "background-color": "#ff0",
                        "color": "#000",
                        "font-size": "26px",
                    },
                    textTrackActive: 'click',
                    whitelist: ['']
                });
                // player.emit('resourceReady', [{ name: '超清', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4' },
                //     { name: '高清', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4' },
                //     { name: '标清', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4' }]);


                player.once('ready',()=>{
                    initPlayer();
                });


                // $("#replyContent").focus(function(){
                //     playerOptions.subtitleAutoFocus = false;
                //     $("#chkSubtitleAutoFocus").prop("checked",playerOptions.subtitleAutoFocus);
                // })

            // <path id="svg_3" d="m15.747846,4.156409c1.274188,0.001595 2.491443,0.220075 3.644241,0.585069l-0.912356,1.562631l6.476249,0l-1.619476,-2.777472l-1.61824,-2.776642l-0.851854,1.463112c-1.596511,-0.578023 -3.31761,-0.901517 -5.117402,-0.901517c-8.28431,0 -14.999003,6.649933 -14.999003,14.853797c0,3.404873 1.169397,6.533207 3.115531,9.039639l2.280676,-1.734101c-1.573979,-2.025542 -2.520341,-4.553135 -2.525476,-7.304718c0.011464,-6.632716 5.43021,-11.999629 12.127111,-12.009798l0.000001,0zm11.885053,2.972472l-2.280671,1.734932c1.573582,2.024771 2.51995,4.550771 2.524279,7.303171c-0.011465,6.632662 -5.43021,11.998807 -12.1275,12.009737c-1.186799,-0.001519 -2.322201,-0.192622 -3.404602,-0.512216l0.858557,-1.470203l-6.47622,0l1.618279,2.775935l1.619446,2.779764l0.902865,-1.55162c1.531253,0.527892 3.170073,0.8224 4.881675,0.823166c8.285505,-0.001529 14.999047,-6.651467 15.000993,-14.855338c-0.001946,-3.404866 -1.172175,-6.532436 -3.117101,-9.037326l0,-0.000001z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/>
            });



            function initPlayer(){

                window.addEventListener('resize',function(){document.getElementById('mse').style.height=window.innerHeight+'px';});

                //自定义控制条
                $(".xgplayer-controls").append("<xg-prev class=\"xgplayer-prev\"><xg-icon class=\"xgplayer-icon\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\">\n" +
                    "                <path transform=\"scale(0.025 0.025)\" d=\"M600 1140v-768h128v352l320-320v704l-320-320v352zz\"></path>\n" +
                    "            </svg></xg-icon></xg-prev>");
                $(".xgplayer-controls").append("<xg-next class=\"xgplayer-next\"><xg-icon class=\"xgplayer-icon\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\">\n" +
                    "                <path transform=\"scale(0.025 0.025)\" d=\"M800 380v768h-128v-352l-320 320v-704l320 320v-352z\"></path>\n" +
                    "            </svg></xg-icon></xg-next>");
                $(".xgplayer-controls").append("<xg-cycle class=\"xgplayer-cycle\"><xg-icon class=\"xgplayer-icon\"><svg width=\"40\" height=\"40\" xmlns=\"http://www.w3.org/2000/svg\"><g><rect fill=\"none\" id=\"canvas_background\" height=\"42\" width=\"42\" y=\"-1\" x=\"-1\"></rect><g display=\"none\" overflow=\"visible\" y=\"0\" x=\"0\" height=\"100%\" width=\"100%\" id=\"canvasGrid\"><rect fill=\"url(#gridpattern)\" stroke-width=\"0\" y=\"0\" x=\"0\" height=\"100%\" width=\"100%\"></rect></g></g><g><path fill=\"#ffffff\" stroke-width=\"2.5\" d=\"m20.001725,11.807581c-1.019341,0.001081 -1.993136,0.149083 -2.915365,0.396336l0.729878,1.058555l-5.180951,0l1.295569,-1.881511l1.29458,-1.880948l0.681477,0.991139c1.277197,-0.391563 2.654063,-0.610704 4.093883,-0.610704c6.627386,0 11.999091,4.504786 11.999091,10.062235c0,2.306524 -0.935509,4.425714 -2.492402,6.123617l-1.824524,-1.174712c1.259171,-1.372139 2.016254,-3.084377 2.020362,-4.94835c-0.009171,-4.493124 -4.344127,-8.128769 -9.701598,-8.135658l-0.000001,0zm-9.507954,2.013607l1.82452,1.175275c-1.258854,1.371617 -2.015941,3.082776 -2.019405,4.947302c0.009172,4.493087 4.344127,8.128212 9.701909,8.135616c0.94943,-0.001029 1.857743,-0.130486 2.723656,-0.346984l-0.686839,-0.995942l5.180928,0l-1.294611,1.880469l-1.295545,1.883063l-0.722285,-1.051096c-1.224991,0.357604 -2.536034,0.557109 -3.905303,0.557628c-6.628342,-0.001036 -11.999125,-4.505826 -12.000682,-10.063279c0.001557,-2.306519 0.937731,-4.425192 2.493658,-6.12205l0,-0.000001z\" id=\"svg_1\" style=\"fill:#fff\"></path></g>" +
                    "</svg></xg-icon></xg-cycle>");
                $("#mse").append("<xg-text-track class=\"xg-text-track text-track-stroke\" data-language=\"zh\" data-id=\"\" data-label=\"字幕1\" style=\"color: rgb(255, 255, 255); font-size: 16px; bottom: 50px; right: 20px; left: 20px;\"><xg-text-track-inner><xg-text-track-span class=\"text-track-double\" id='videoSubtitleBlock' data-start=\"12.001\" data-end=\"90\" data-index=\"5\">\n" +
                    "</xg-text-track-span></xg-text-track-inner></xg-text-track>");
                // $(".xgplayer-controls").append("<xg-text-track class=\"xg-text-track text-track-stroke\" data-language=\"zh\" data-id=\"\" data-label=\"字幕1\" style=\"color: rgb(255, 255, 255); bottom: 6.06px; font-size: 16px; right: 119px; left: 119px;\"><xg-text-track-inner><xg-text-track-span class=\"text-track-double\" data-start=\"12.001\" data-end=\"90\" data-index=\"5\">这是外挂字幕</xg-text-track-span></xg-text-track-inner></xg-text-track>");


                $(".xgplayer-playbackrate").find("p[class='name']").first().html("速率")


                //事件
                $(".xgplayer-prev").click(function(){
                    // let currentTime = player.currentTime;
                    // let time = parseInt(currentTime * 1000);
                    // //逆序
                    // let sortedSubtitles = [];
                    // playerOptions.subtitles.forEach(function(item,index,array){
                    //     sortedSubtitles.push(item);
                    // });
                    // sortedSubtitles = sortedSubtitles.sort(function(a,b){
                    //     return  b.orderNo - a.orderNo;
                    // });
                    // // debugger;
                    // let subtitle = sortedSubtitles.find(function(item,index,array){
                    //     return (item.endTimeMs < time);  //match prev
                    // });
                    // if(!subtitle){
                    //     $.message({type:'warning',content:'已经是第一句'});
                    // }else{
                    //     player.currentTime = subtitle.startTimeMs/1000;
                    //     if(playerOptions.cycle){
                    //         playerOptions.startTime = subtitle.startTimeMs/1000;
                    //         playerOptions.endTime = subtitle.endTimeMs/1000;
                    //     }
                    // }


                    if((playerOptions.subtitleIndex) <= 0){
                        $.message({type:'warning',content:'已经是第一句'});
                    }else{
                        // debugger;
                        playerOptions.subtitleIndex = playerOptions.subtitleIndex-1;
                        let subtitle = playerOptions.subtitles[playerOptions.subtitleIndex];
                        player.currentTime = subtitle.startTimeMs/1000;
                        if(playerOptions.cycle){
                            playerOptions.startTime = subtitle.startTimeMs/1000;
                            playerOptions.endTime = subtitle.endTimeMs/1000;
                        }
                        subtitleFocus(playerOptions.subtitleIndex);
                    }
                });

                $(".xgplayer-next").click(function(){
                    // debugger;
                    // let currentTime = player.currentTime;
                    // let time = parseInt(currentTime * 1000);
                    // // debugger;
                    // let subtitle = playerOptions.subtitles.find(function(item,index,array){
                    //     return (item.startTimeMs > time);  //match next
                    // });
                    // if(!subtitle){
                    //     $.message({type:'warning',content:'已经是最后一句'});
                    // }else{
                    //     player.currentTime = subtitle.startTimeMs/1000;
                    //     if(playerOptions.cycle){
                    //         playerOptions.startTime = subtitle.startTimeMs/1000;
                    //         playerOptions.endTime = subtitle.endTimeMs/1000;
                    //     }
                    // }

                    if((playerOptions.subtitleIndex+1)>=playerOptions.subtitles.length){
                        $.message({type:'warning',content:'已经是最后一句'});
                    }else{
                        // debugger;
                        playerOptions.subtitleIndex = playerOptions.subtitleIndex+1;
                        let subtitle = playerOptions.subtitles[playerOptions.subtitleIndex];
                        player.currentTime = subtitle.startTimeMs/1000;
                        if(playerOptions.cycle){
                            playerOptions.startTime = subtitle.startTimeMs/1000;
                            playerOptions.endTime = subtitle.endTimeMs/1000;
                        }
                    }
                    subtitleFocus(playerOptions.subtitleIndex);

                });

                $(".xgplayer-cycle").click(function(){
                    let color = playerOptions.cycle ? 'white' : 'red';
                    playerOptions.cycle = !playerOptions.cycle;
                    if(playerOptions.cycle){
                        let currentTime = player.currentTime;
                        let time = parseInt(currentTime * 1000);
                        let subtitle = playerOptions.subtitles.find(function(item,index,array){
                            return (item.endTimeMs > time);  //match next
                        });
                        playerOptions.startTime = subtitle.startTimeMs/1000;
                        playerOptions.endTime = subtitle.endTimeMs/1000;
                    }
                    // debugger;
                    $(".xgplayer-cycle").find("path").first().prop("style","fill:"+color);

                });

                $("#subtitleBlock").on("mouseover","li",function(){
                    if($(this).css("background") != "lightyellow"){
                        $(this).css("background","aliceblue");
                    }
                });
                $("#subtitleBlock").on("mouseout","li",function(){
                    if($(this).css("background") != "lightyellow"){
                        $(this).css("background","white");
                    }
                });

                // $("#subtitleBlock").children("li").mouseover(function(){
                //     if($(this).css("background") != "lightyellow"){
                //         $(this).css("background","aliceblue");
                //     }
                // });
                //
                // $("#subtitleBlock").children("li").mouseout(function(){
                //     if($(this).css("background") != "lightyellow"){
                //         $(this).css("background","white");
                //     }
                // })

                $("#subtitleBlock").on("mouseover","li > p > a[type='en']",function(){
                    if($(this).css("background") != "lightyellow"){
                        $(this).css("background","lightblue");
                    }
                });
                $("#subtitleBlock").on("mouseout","li > p > a[type='en']",function(){
                    if($(this).css("background") != "lightyellow"){
                        $(this).css("background","aliceblue");
                    }
                });

                // $("#subtitleBlock").children("li").find("p>a[type='en']").on("mouseover",function(){
                //     // debugger;
                //     if($(this).css("background") != "lightyellow"){
                //         $(this).css("background","lightblue");
                //     }
                // });
                //
                // $("#subtitleBlock").children("li").find("p>a[type='en']").on("mouseout",function(){
                //     if($(this).css("background") != "lightyellow"){
                //         $(this).css("background","aliceblue");
                //     }
                // })

                // document.querySelector("#subtitleBlock > li:nth-child(27) > p:nth-child(5)")
                $("#chkShowCnText").prop("checked",playerOptions.showCnText);
                $("#chkShowEnText").prop("checked",playerOptions.showEnText);
                // $("#chkSubtitleAutoFocus").prop("checked",playerOptions.subtitleAutoFocus);
            }

            function initSubtitle(dataList){
                $("#subtitleBlock").html('');
                var optionArray = [{value:'0',text:'未知'},{value:'1',text:'容易'},{value:'2',text:'一般'},{value:'3',text:'困难'}];
                // var options = '<option value="0">未知</option><option value="1">容易</option><option value="2">一般</option><option value="3">困难</option>';
                dataList.forEach(function(item,i,array){
                    var options = '';
                    optionArray.forEach(function(opt,optIndex,optArray){
                        var checkedStr = '';
                        if(item.practiceLevel == opt.value){
                            checkedStr = 'selected="true"';
                        }
                        options += '<option value="'+opt.value+'" '+checkedStr+'>'+opt.text+'</option>';

                    });
                    var collectText = item.collect == 1 ? '已收藏' : '未收藏';
                    var str='<li ondblclick="jumpToTime(this)" data="'+item.startTimeMs+'" style="background: white;"><i></i>\n' +
                        '  <span>'+item.gmtStart+'</span>\n' +
                        '    <a onclick="correctSubtitle(this)" data="'+item.id+'" class="inputsub-subtitle">纠正</a>\n' +
                        '    掌握程度<select onchange="setSubtitlePracticeLevel(this)" data="'+item.id+'" value="'+item.practiceLevel+'" class="inputsub-subtitle-practice">'+options+'</select>\n' +
                        '    <a onclick="subtitleCollect(this)" data="'+item.id+'" value="'+item.collect+'" class="inputsub-subtitle-collect">'+collectText+'</a>\n' +
                        '    <p><a href="javascript:void(0)">中文：'+item.cnText+'</a></p>\n' +
                        '    <p> 英文： \n';
                    var wordList = '';
                    item.singleWordDictList.forEach(function(wordItem,wordIndex,wordArray){
                        wordList += ' <a type="en" word="'+wordItem.name+'" specialchar="'+wordItem.specialChar+'" href="javascript:void(0)" onclick="showWordDictModal(this)" >'+wordItem.name+'</a> \n';
                    });
                    str += wordList+
                        '    </p>\n' +
                        '</li>';
                    $("#subtitleBlock").append(str);
                });
            }

            function initData(successCall){
                var param = {contentId:$("#contentId").val(),collect:playerOptions.queryCollect,practiceLevel:playerOptions.queryPracticeLevel};
                $.ajax({type:"GET",url:'/cmsEnglish/getSubtitleListByContentId',dataType:'JSON', contentType:'application/json', data:param,success:function(result){
                        if(result.success){
                            let dataList = result.data;
                            playerOptions.subtitles = dataList;
                            initSubtitle(dataList);

                            // debugger;
                            if(successCall){
                                successCall();
                            }

                        }else{
                            $.message({type:'error',content:result.message || '获取字幕失败'});
                        }
                    }});
            }

            function selCycleNum(obj){
                var val = $(obj).val();
                playerOptions.cycleNum = parseInt(val);

            }

            function selSubtitlePracticeLevel(obj){
                var val = $(obj).val();
                playerOptions.queryPracticeLevel = val;
                if($("#selSubtitlePracticeLevel").val() || $("#selSubtitleCollect").val()){
                    playerOptions.filter = true;
                }else{
                    playerOptions.filter = false;
                }
                if(playerOptions.subtitles.length > 0) {
                    let subtitle = playerOptions.subtitles[0];
                    player.currentTime = subtitle.startTimeMs/1000;
                    playerOptions.filterEndTime = subtitle.endTimeMs;
                }
                initData();
            }
            function selSubtitleCollect(obj){
                var val = $(obj).val();
                playerOptions.queryCollect = val;
                if($("#selSubtitlePracticeLevel").val() || $("#selSubtitleCollect").val()){
                    playerOptions.filter = true;
                }else{
                    playerOptions.filter = false;
                }
                if(playerOptions.subtitles.length > 0) {
                   let subtitle = playerOptions.subtitles[0];
                   player.currentTime = subtitle.startTimeMs/1000;
                    playerOptions.filterEndTime = subtitle.endTimeMs;
                }
                initData();
            }


            function jumpToTime(obj){
                let startTime = parseInt($(obj).attr("data"));
                let currentTime = startTime / 1000;
                player.currentTime = currentTime;

                // let time = parseInt(currentTime * 1000);

                if(playerOptions.cycle){
                    let subtitle = playerOptions.subtitles.find(function(item,index,array){
                        return (item.endTimeMs > startTime);  //match current
                    });
                    playerOptions.startTime = subtitle.startTimeMs/1000;
                    playerOptions.endTime = subtitle.endTimeMs/1000;
                }

                //修改样式
                $("#subtitleBlock").children("li").css("background","white");
                $(obj).css("background","lightyellow");


            }

            function subtitleFocus(index){

                if(index < 0 || index >= playerOptions.subtitles.length){
                    return;
                }
                let subtitle = playerOptions.subtitles[index];
                // let currentTime = player.currentTime;
                // let time = parseInt(currentTime * 1000);
                //
                // let subtitle = playerOptions.subtitles.find(function(item,index,array){
                //     return (item.endTimeMs > time);  //match current
                // });
                // debugger;
                // if(subtitle){
                //     //自动字幕选择
                //     // $("#subtitleBlock").children("li").css("background","white");
                //     // let $thisObj = $("#subtitleBlock").find("li[data='"+subtitle.startTimeMs+"']").first();
                //     // $thisObj.css("background","lightyellow");
                //
                //     // document.querySelector("#subtitleBlock > li:nth-child("+subtitle.orderNo+") > p:nth-child(4) > a").focus()
                //     debugger;
                //     var top = document.querySelector("#subtitleBlock > li:nth-child("+subtitle.orderNo+") > p:nth-child(7) > a:nth-child(1)").top;
                //     //获取焦点
                //     // $('#subtitleBlock').animate({scrollTop:top},100);
                //     // document.querySelector("#subtitleBlock > li:nth-child("+subtitle.orderNo+") > p:nth-child(7) > a:nth-child(1)").focus();
                // }
                if(subtitle){
                    //自动字幕选择
                    $("#subtitleBlock").children("li").css("background","white");
                    let $thisObj = $("#subtitleBlock").find("li[data='"+subtitle.startTimeMs+"']").first();
                    $thisObj.css("background","lightyellow");
                    // $(obj).css("background","lightyellow");

                    // debugger;
                    //触发焦点
                    if(playerOptions.subtitleAutoFocus){
                        // document.querySelector("#subtitleBlock > li:nth-child(1)")
                        var startTop = $("#subtitleBlock > li:nth-child(4) ").offset().top;
                        var endTop = $("#subtitleBlock > li:nth-child("+subtitle.orderNo+") ").offset().top;
                        var offsetTop = endTop-startTop;
                        if(offsetTop > 0){
                            $('#subtitleBlock').scrollTop(offsetTop);

                        }
                        //获取焦点

                        // $("#test4").offset().top
                        // document.querySelector("#subtitleBlock > li:nth-child("+subtitle.orderNo+") > p:nth-child(7) > a:nth-child(1)").focus();
                    }
                    // $thisObj.find("a").first().get(0).focus();

                    //字幕处理
                    var subtitleHtml = '';
                    if(playerOptions.showEnText){
                        subtitleHtml += '<p>'+subtitle.enText+'</p>';
                    }
                    if(playerOptions.showCnText){
                        subtitleHtml += '<p>'+subtitle.cnText+'</p>';
                    }
                    $("#videoSubtitleBlock").html(subtitleHtml);

                }
            }

            function setPlayerOptions(propKey,obj){
                playerOptions[propKey] = $(obj).prop("checked");
            }

            function setSubtitlePracticeLevel(obj){
                var subtitleId = $(obj).attr("data");
                var param = {subtitleId:subtitleId,practiceLevel:obj.value};
                $.ajax({type:"POST",url:'/cmsEnglish/setSubtitlePracticeLevel',dataType:'JSON', contentType:'application/json', data:JSON.stringify(param),success:function(result){
                        if(result.success){
                            // if(wordCollect){
                                // $(obj).removeClass("added");
                                // wordCollect = false;
                                //$.message({type:'success',content:"取消收藏成功"});
                            // }else{
                            //     $(obj).addClass("added");
                            //     wordCollect = true;
                            //     $.message({type:'success',content:"收藏成功"});
                            // }
                        }else{
                            $.message({type:'error',content:result.message || '操作失败'});
                        }
                    }});


            }

            function subtitleCollect(obj){
                var subtitleId = $(obj).attr("data");
                // debugger;
                let collect = $(obj).attr("value") == "1" ? true : false;
                var param = {subtitleId:subtitleId,collect:collect ? 0 : 1};
                $.ajax({type:"POST",url:'/cmsEnglish/subtitleCollect',dataType:'JSON', contentType:'application/json', data:JSON.stringify(param),success:function(result){
                        if(result.success){
                            if(collect){
                                $(obj).html("未收藏");
                                $(obj).attr("value","0");
                                $.message({type:'success',content:"取消收藏成功"});
                            }else{
                                $(obj).html("已收藏");
                                $(obj).attr("value","1");
                                $.message({type:'success',content:"收藏成功"});
                            }

                        }else{
                            $.message({type:'error',content:result.message || '操作失败'});
                        }
                    }});

            }

            function correctSubtitle(obj){

            }

            function playerTimeProcess(){
                if(player.paused){
                    return;
                }
                let currentTime = player.currentTime;
                let time = parseInt(currentTime * 1000);
                let subtitle = playerOptions.subtitles.find(function(item,index,array){
                    if(item.endTimeMs > time){
                        playerOptions.subtitleIndex = index;
                        return true;
                    }else{
                        return false;
                    }
                    // return (item.endTimeMs > time);  //match current
                });


                subtitleFocus(playerOptions.subtitleIndex);

                //循环播放
                if(playerOptions.cycle){
                    if(currentTime >= playerOptions.endTime){
                        if(playerOptions.cycleNum == 0){ //次数为0直接播放下一个
                            playerOptions.cycleNum = parseInt($("#selCycleNum").val());
                            subtitle = playerOptions.subtitles.find(function(item,index,array){
                                return (item.startTimeMs > time);  //match next
                            });
                            if(subtitle != null){
                                playerOptions.startTime = subtitle.startTimeMs/1000;
                                playerOptions.endTime = subtitle.endTimeMs/1000;
                                player.currentTime = playerOptions.startTime;
                                playerOptions.cycleNum--;
                            }
                        }else{
                            if(playerOptions.cycleNum > 0){
                                playerOptions.cycleNum--;
                            }
                            player.currentTime = playerOptions.startTime

                        }
                    }
                }
                //过滤播放
                if(playerOptions.filter){
                    if(subtitle){
                        if(time >= playerOptions.filterEndTime){  //播放当前段结束
                            subtitle = playerOptions.subtitles.find(function(item,index,array){
                                return (item.startTimeMs > time);  //match next
                            });
                            if(subtitle != null){
                                player.currentTime = subtitle.startTimeMs/1000;
                                playerOptions.filterEndTime = subtitle.endTimeMs;
                            }
                        }
                    }



                }



            }





        </script>





        <p th:if="${logined}">
          <span class="digg-icon" id="like" th:classappend="${liked} ? 'digg-icon-done':''"></span>
          <span class="digg-text" id="likeNum" th:text="${likeNum}"></span>
          <a href="#replyContent"><span class="digg-icon-comment" id="reply"></span></a>
          <span class="digg-text" th:text="${replyNum}"></span>
        </p>
<!--        <div tabindex="0" role="button" aria-label="点赞33" aria-pressed="false" class="detail-like">-->
<!--          <div class="digg-icon"><div class="inner"><i></i></div></div><span>33</span>-->
<!--        </div>-->

<!--        <div class="digg-icon"><div class="inner"><i></i></div></div>-->

<!--                <p><span class="diggit">赞一个</span></p>-->
        <div class="nextinfo">
          <p th:if="${preContent}" >上一篇：<a th:href="${preContent.url}" th:text="${preContent.title}"></a></p>
          <p th:if="${nextContent}" >下一篇：<a th:href="${nextContent.url}" th:text="${nextContent.title}"></a></p>
        </div>
      </div>
        <p class="con_info">
            <b>简介</b><span th:text="${content.description}"></span></p>
    </div>


    <div class="whitebg gbook">
      <h2 class="htitle">内容评论</h2>
      <ul>

        <!-- 评论 开始 -->
        <div class="pinglun">



            <!--       <div class="pl-area-userpic">
                    <img id="pl-userpic" src="/e/extend/lgyPl/assets/nouserpic.gif">      </div> -->
            <div class="pl-area-post" th:if="${logined}">
              <div class="pl-post">
                <div class="pl-textarea"><textarea class="pl-post-word" id="replyContent" placeholder="写下你想说的，开始我们的对话"></textarea>
                </div>
                <div class="pl-tools">
                  <ul>
                    <li class="pl-tools-lastchild"><button class="pl-submit-btn" id="btnReply">发 布</button></li>
<!--                    <li class="username"><i class="iconfont"></i><input type="text" id="pl-username" class="pl-key" size="15" placeholder="你的昵称" th:value="${user.userName}"></li>-->
                  </ul>
                </div>
<!--                <div class="pl-img-box" id="pl-img-box" style="display: none;">-->
<!--                  <div class="pl-img-box-before"><a class="pl-icon icon-img"></a></div>-->
<!--                  <div class="pl-img-file"><input placeholder="http://" type="text"> <button>添加</button></div>-->
<!--                </div>-->
              </div>
            </div>

<!--            <div class="pl-clr"></div>-->
<!--            <div class="pl-showinfo">请先说点什么</div>-->
<!--            <div class="pl-clr"></div>-->
<!--            <div class="pl-show-hot-list">-->
<!--              <div class="pl-title">热门评论</div>-->
<!--              <div class="pl-show-list" id="pl-show-hot"></div>-->
<!--            </div>-->
            <div class="pl-clr" id="pl-start"></div>
<!--            <div class="pl-header"><em id="pl-joinnum">3397</em>人参与，<em id="pl-totalnum">3</em>条评论<span class="pl-userinfo" id="pl-userinfo"></span></div>-->
            <div class="pl-show-list" id="pl-show-all">

              <div class="pl-area pl-show-box" id="pl-show-box-116" th:each="replyItem:${replyDataList}">
                <div class="pl-area-userpic">
                  <img id="pl-userpic" th:src="${replyItem.replyUser.avatar}">
                </div>
                <div class="pl-area-post">
                  <div class="pl-show-title"><span th:text="${replyItem.replyUser.userName}"></span> <span class="pl-show-time pl-fr" th:text="${#dates.format(replyItem.gmtCreate, 'yyyy-MM-dd HH:mm')}"></span></div>
                  <div class="pl-show-saytext" th:utext="${replyItem.content}"></div>
                  <div class="pl-show-tools">
<!--                    <a id="pl-err-info-116"></a>-->
<!--                    <a href="javascript:;" onclick="lgyPl.doForPl(116,1,this)">-->
<!--                      <i class="iconfont icon-good"></i><span id="pl-1-116"></span></a>-->
                    <a class="pl-reply"  href="javascript:;"><i class="iconfont"></i></a>
                  </div>
                  <div class="pl-show-replay" style="display:none">
                    <div class="pl-post">
                      <div class="pl-textarea"><textarea class="pl-post-word" id="pl-520am-f-saytext" placeholder="@昵称"></textarea>
                      </div>
                      <div class="pl-tools">
                        <ul>
                          <li class="pl-tools-lastchild"><button class="pl-submit-btn" id="btnItemReply">发 布</button></li>
                          <li class="username"><i class="iconfont"></i><input type="text" id="pl-username" class="pl-key" size="15" placeholder="你的昵称" th:value="${user.userName}"></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="pl-clr"></div>
              </div>

            </div>
<!--            <div id="pl-pagination"></div>-->
<!--            <button onclick="lgyPl.getNewsComment(0,this);" class="showAllComment buttonGray">查看更多</button></div>-->
<!--          <script type="text/javascript" src="/e/extend/lgyPl/api.js"></script>-->
        </div>
        <!-- 评论 结束 -->
      </ul>
    </div>

  </div>
  <!--lbox end-->
  <th:block th:include="include-nblog :: content-right-info" />


</content>

<th:block th:include="include-nblog :: footer" />
<link th:href="@{/blog/css/style.css}" rel="stylesheet">
<style>
  /*.detail-like {*/
  /*  text-align: center;*/
  /*  cursor: pointer;*/
  /*  color: #222;*/
  /*  outline: none;*/
  /*}*/
  /*.detail-like>span {*/
  /*  display: inline-block;*/
  /*  margin-top: 4px;*/
  /*  font-size: 12px;*/
  /*  line-height: 20px;*/
  /*}*/
  /*.digg-icon {*/
  /*  position: relative;*/
  /*  border-radius: 24px;*/
  /*  width: 48px;*/
  /*  height: 48px;*/
  /*  background: #f8f8f8;*/
  /*}*/
  /*.digg-icon .inner {*/
  /*  position: absolute;*/
  /*  top: 50%;*/
  /*  left: 50%;*/
  /*  -webkit-transform: translate(-50%,-50%);*/
  /*  -moz-transform: translate(-50%,-50%);*/
  /*  transform: translate(-50%,-50%);*/
  /*  font-size: 0;*/
  /*}*/
  .digg-icon {
    cursor: pointer;
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(/blog/images/like.svg) no-repeat 50%;
    background-size: contain;
  }


  .digg-icon-done{
    background: url(/blog/images/like_active.svg) no-repeat 50%;
  }

  .digg-icon-comment {
    cursor: pointer;
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(/blog/images/icon_comment.svg) no-repeat 50%;
    background-size: contain;
  }
  .digg-text {
    /*cursor: pointer;*/
    display: inline-block;
    width: 24px;
    height: 24px;
    /*background: url(/blog/images/like.svg) no-repeat 50%;*/
    background-size: contain;
  }
</style>
<script>
  $(document).ready(function(){
    $("#like").click(function(){
      var liked = $("#liked").val();
      like(liked=='true');
    });

    $("#btnReply").click(function () {
      var id = $("#contentId").val();
      var param = {contentId:id,content:$("#replyContent").val(),replyId:null};
      $.ajax({type:"POST",url:'/cmsEnglish/reply',dataType:'JSON', contentType:'application/json', data:JSON.stringify(param),success:function(result){
          if(result.success){
              $.message({type:'success',content:"发布成功"});
            window.location.reload();
          }else{
              $.message({type:'error',content:result.message || '操作失败'});
          }
        }});
    });


  //keyboard event  键盘事件
  $(window).keydown(function(event){
      switch (event.which) {
          case(32): //space
              playOrPause(event);
              break;
          // case(37): //left
          //     $(".xgplayer-prev").trigger("click");
          //     break;
          // case(38)://up
          //     $(".xgplayer-cycle").trigger("click");
          //     break;
          // case(39)://right
          //     $(".xgplayer-next").trigger("click");
          //     break;
          // case(40)://down
          //     break;
          case(83): //left s
              $(".xgplayer-prev").trigger("click");
              break;
          case(69)://up e
              $(".xgplayer-cycle").trigger("click");
              break;
          case(70)://right f
              $(".xgplayer-next").trigger("click");
              break;
          case(68)://down d
              playOrPause(event);
              break;

      }
      // subtitleFocus();
  });

  });

  function playOrPause(e){
      e.stopPropagation();
      e.preventDefault();

      if(player.paused){
          player.play();
      }else{
          player.pause();
      }
      // subtitleFocus();

  }

  function like(liked){
    var url = "/cmsEnglish/like";
    if(liked){
      url = "/cmsEnglish/unLike";
    }
    var id = $("#contentId").val();
    var param = {id:id};
    $.ajax({type:"POST",url:url,dataType:'JSON', contentType:'application/json', data:JSON.stringify(param),success:function(result){
        var likeNum = Number($("#likeNum").text());
        if(result.success){
            if(liked){
              $(".digg-icon").removeClass("digg-icon-done");
              $("#liked").val(false);
              $("#likeNum").text(likeNum-1);
            }else{
              $(".digg-icon").addClass("digg-icon-done");
              $("#liked").val(true);
              $("#likeNum").text(likeNum+1);
            }
        }else{
            $.message({type:'error',content:result.message || '操作失败'});
        }
      }});

  }
</script>
<!--单词字典查看-->
<th:block th:include="include-wordDict :: wordDict" />

</body>
</html>
